<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /fasttmp/mkdist-qt-4.3.5-1211793125/qtopia-core-opensource-src-4.3.5/doc/src/examples/tutorial.qdoc -->
<head>
  <title>Qt 4.3: Qt Tutorial 6 - Building Blocks Galore!</title>
  <link rel="prev" href="tutorial-t5.html" />
  <link rel="contents" href="tutorial.html" />
  <link rel="next" href="tutorial-t7.html" />
  <link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" width="32"><a href="http://www.trolltech.com/products/qt"><img src="images/qt-logo.png" align="left" width="32" height="32" border="0" /></a></td>
<td width="1">&nbsp;&nbsp;</td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a>&nbsp;&middot; <a href="classes.html"><font color="#004faf">All&nbsp;Classes</font></a>&nbsp;&middot; <a href="mainclasses.html"><font color="#004faf">Main&nbsp;Classes</font></a>&nbsp;&middot; <a href="groups.html"><font color="#004faf">Grouped&nbsp;Classes</font></a>&nbsp;&middot; <a href="modules.html"><font color="#004faf">Modules</font></a>&nbsp;&middot; <a href="functions.html"><font color="#004faf">Functions</font></a></td>
<td align="right" valign="top" width="230"><a href="http://www.trolltech.com"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></a></td></tr></table><p>
[Previous: <a href="tutorial-t5.html">Chapter 5</a>]
[<a href="tutorial.html">Qt Tutorial</a>]
[Next: <a href="tutorial-t7.html">Chapter 7</a>]
</p>
<h1 align="center">Qt Tutorial 6 - Building Blocks Galore!<br /><small></small></h1>
<p>Files:</p>
<ul>
<li><a href="tutorial-t6-main-cpp.html">tutorial/t6/main.cpp</a></li>
</ul>
<p align="center"><img src="images/t6.png" alt="Screenshot of Chapter 6" /></p><p>This example shows how to encapsulate two widgets into a new component and how easy it is to use many widgets. For the first time, we use a custom widget as a child widget.</p>
<pre> #include &lt;QApplication&gt;
 #include &lt;QFont&gt;
 #include &lt;QGridLayout&gt;
 #include &lt;QLCDNumber&gt;
 #include &lt;QPushButton&gt;
 #include &lt;QSlider&gt;
 #include &lt;QVBoxLayout&gt;
 #include &lt;QWidget&gt;

 class LCDRange : public QWidget
 {
 public:
     LCDRange(QWidget *parent = 0);
 };

 LCDRange::LCDRange(QWidget *parent)
     : QWidget(parent)
 {
     QLCDNumber *lcd = new QLCDNumber(2);
     lcd-&gt;setSegmentStyle(QLCDNumber::Filled);

     QSlider *slider = new QSlider(Qt::Horizontal);
     slider-&gt;setRange(0, 99);
     slider-&gt;setValue(0);
     connect(slider, SIGNAL(valueChanged(int)),
             lcd, SLOT(display(int)));

     QVBoxLayout *layout = new QVBoxLayout;
     layout-&gt;addWidget(lcd);
     layout-&gt;addWidget(slider);
     setLayout(layout);
 }

 class MyWidget : public QWidget
 {
 public:
     MyWidget(QWidget *parent = 0);
 };

 MyWidget::MyWidget(QWidget *parent)
     : QWidget(parent)
 {
     QPushButton *quit = new QPushButton(tr(&quot;Quit&quot;));
     quit-&gt;setFont(QFont(&quot;Times&quot;, 18, QFont::Bold));
     connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));

     QGridLayout *grid = new QGridLayout;
     for (int row = 0; row &lt; 3; ++row) {
         for (int column = 0; column &lt; 3; ++column) {
             LCDRange *lcdRange = new LCDRange;
             grid-&gt;addWidget(lcdRange, row, column);
         }
     }

     QVBoxLayout *layout = new QVBoxLayout;
     layout-&gt;addWidget(quit);
     layout-&gt;addLayout(grid);
     setLayout(layout);
 }

 int main(int argc, char *argv[])
 {
     QApplication app(argc, argv);
     MyWidget widget;
     widget.show();
     return app.exec();
 }</pre>
<a name="line-by-line-walkthrough"></a>
<h2>Line by Line Walkthrough</h2>
<pre> class LCDRange : public QWidget
 {
 public:
     LCDRange(QWidget *parent = 0);
 };</pre>
<p>The <tt>LCDRange</tt> widget is a widget without any API. It just has a constructor. This sort of widget is not very useful, so we'll add some API later.</p>
<pre> LCDRange::LCDRange(QWidget *parent)
     : QWidget(parent)
 {
     QLCDNumber *lcd = new QLCDNumber(2);
     lcd-&gt;setSegmentStyle(QLCDNumber::Filled);

     QSlider *slider = new QSlider(Qt::Horizontal);
     slider-&gt;setRange(0, 99);
     slider-&gt;setValue(0);
     connect(slider, SIGNAL(valueChanged(int)),
             lcd, SLOT(display(int)));

     QVBoxLayout *layout = new QVBoxLayout;
     layout-&gt;addWidget(lcd);
     layout-&gt;addWidget(slider);
     setLayout(layout);
 }</pre>
<p>This is lifted straight from the <tt>MyWidget</tt> constructor in Chapter 5. The only differences are that the <b>Quit</b> button is left out and the class is renamed.</p>
<pre> class MyWidget : public QWidget
 {
 public:
     MyWidget(QWidget *parent = 0);
 };</pre>
<p><tt>MyWidget</tt>, too, contains no API except a constructor.</p>
<pre> MyWidget::MyWidget(QWidget *parent)
     : QWidget(parent)
 {
     QPushButton *quit = new QPushButton(tr(&quot;Quit&quot;));
     quit-&gt;setFont(QFont(&quot;Times&quot;, 18, QFont::Bold));
     connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));</pre>
<p>The push button that used to be in what is now <tt>LCDRange</tt> has been separated so that we can have one <b>Quit</b> button and many <tt>LCDRange</tt> objects.</p>
<pre>     QGridLayout *grid = new QGridLayout;</pre>
<p>We create a <a href="qwidget.html">QWidget</a> with a <a href="qgridlayout.html">QGridLayout</a> that will contain three columns.</p>
<p>The <a href="qgridlayout.html">QGridLayout</a> automatically arranges its widgets in rows and columns; you can specify the row and column numbers when adding widgets to the layout, and <a href="qgridlayout.html">QGridLayout</a> will fit them into the grid.</p>
<pre>     for (int row = 0; row &lt; 3; ++row) {
         for (int column = 0; column &lt; 3; ++column) {
             LCDRange *lcdRange = new LCDRange;
             grid-&gt;addWidget(lcdRange, row, column);
         }
     }</pre>
<p>We create nine <tt>LCDRange</tt> widgets, all of which are children of the grid object, and we arrange them in three rows and three columns.</p>
<pre>     QVBoxLayout *layout = new QVBoxLayout;
     layout-&gt;addWidget(quit);
     layout-&gt;addLayout(grid);
     setLayout(layout);
 }</pre>
<p>Finally, we add the <b>Quit</b> button and the grid layout containing <tt>LCDRange</tt> widgets, to the main layout. The QWidget::addLayout() function is similar to the QWidget::addWidget() function, making the given layout a child og the main layout.</p>
<p>That's all.</p>
<a name="running-the-application"></a>
<h2>Running the Application</h2>
<p>This program shows how easy it is to use many widgets at a time. Each one behaves like the slider and LCD number in the previous chapter. Again, the difference lies in the implementation.</p>
<a name="exercises"></a>
<h2>Exercises</h2>
<p>Initialize each slider with a different/random value on startup.</p>
<p>
[Previous: <a href="tutorial-t5.html">Chapter 5</a>]
[<a href="tutorial.html">Qt Tutorial</a>]
[Next: <a href="tutorial-t7.html">Chapter 7</a>]
</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright &copy; 2008 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt 4.3.5</div></td>
</tr></table></div></address></body>
</html>
